<template>
  <div class="search">
    <f-form ref="form" :action="api.shop" :form-key="this.formItem.shopId">
      <f-form-item label="店铺Logo" type="upload" name="shopLogo" :value="formItem.shopLogo" :file-max="1"/>
      <f-form-item label="所属分类" name="typeId" :required="true" type="select" :data="api.type.list" :value="formItem.typeId" label-key="typeName" value-key="typeId"/>
      <f-form-item label="店铺名称" name="shopName" :required="true" :value="formItem.shopName"/>
      <f-form-item label="联系人" name="linkMan" :required="true" :value="formItem.linkMan"/>
      <f-form-item label="联系电话" name="linkTel" :required="true" :value="formItem.linkTel"/>

      <f-form-item label="所属区域" type="areaSelect" name="areaIds" :required="true"  :value="areaIds"  v-if="loaded"></f-form-item>
      <f-form-item label="店铺地址" name="shopAddress"  :value="formItem.shopAddress"/>
      <f-form-item label="营业时间" name="businessHours"  :value="formItem.businessHours"/>
    </f-form>
  </div>
</template>

<script>

  export default {
    name: 'shopForm',
    props: {},
    data() {
      return {
        isAdd: true,
        areaIds: [],
        loaded: false,
        formItem: this.getFormItem()
      }
    },
    methods: {
      getFormItem() {
        return {
          shopName: ''
        }
      },
      setData(data) {
        this.$refs.form.resetFields()
        if (data && data.shopId) {
          this.$refs.form.getDetails({ shopId: data.shopId }, (data) => {
            this.formItem = data
            this.areaIds = [this.formItem.proId, this.formItem.cityId, this.formItem.areaId]
            this.loaded = true
          })
          this.isAdd = false
        } else {
          this.formItem = this.getFormItem()
          this.loaded = true
        }
      },
      handleSubmit(callback) {
        this.$refs.form.handlerSubmit({}, callback)
      }
    },
    created() {

    },
    components: {  }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
